<template>
  <div>
    <v-chart :forceFit="true" :height="height" :data="data">
      <v-coord type="rect" direction="LT" />
      <v-tooltip />
      <v-legend />
      <v-axis data-key="value" position="right" />
      <v-axis data-key="label" :label="label" />
      <v-bar position="label*value" color="type" :adjust="adjust" />
    </v-chart>
  </div>
</template>

<script lang="ts">
const DataSet = require("@antv/data-set");
import { Component, Vue, Prop, Emit } from "vue-property-decorator";

@Component({
  name: "basebar-blockbar",

  layout: "menu"
})
export default class BaseBarBlock extends Vue {
  @Prop({ type: Number, default: 400 }) height?: number;
  @Prop({ type: Array, required: true }) sourceData!: any[];
  data: any[] = [];
  label: object = { offset: 12 };
  adjust: any[] = [{ type: "dodge", marginRatio: 1 / 32 }];
    // sourceData: any[] = [
    //   { label: "Mon.", series1: 2800, series2: 2260 },
    //   { label: "Tues.", series1: 1800, series2: 1300 },
    //   { label: "Wed.", series1: 950, series2: 900 },
    //   { label: "Thur.", series1: 500, series2: 390 },
    //   { label: "Fri.", series1: 170, series2: 100 }
    // ];
  created() {
    const data = this.sourceData;
    let item: string[] = [];
    if (data && data.length > 0) {
      for (let j in data[0]) {
        if (j !== "label") {
          item.push(j);
        }
      }
    }
    const dv = new DataSet.View().source(this.sourceData);
    dv.transform({
      type: "fold",
      fields: item,
      key: "type",
      value: "value"
    });
    this.data = dv.rows;
  }
}
</script>

<style lang='less' scoped>
</style>